/**
 * Created by wangzilong on 2017/4/11.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    TextInput,
    ListView,
    Modal,
    Platform,
    InteractionManager,
    Alert
} from 'react-native';
import ImageWrapper from '../components/ImageWrapper';
import NavigationBar from '../components/NavigationBar';
import userService from '../lib/services/userService';
var Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');

export default class FriendsList extends Component{
    constructor(props) {
        super(props);
        // alert(JSON.stringify(this.props.navigation.state.params.clubId))
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.list = [];
        this.page = 1;
        this.state = {
            groupName:this.props.navigation.state.params.groupName,
            groupId:this.props.navigation.state.params.groupId,
            token:this.props.navigation.state.params.token,
            groupList:this.props.navigation.state.params.groupList,
            friendeArr:ds.cloneWithRows(this.list),
            loadMore:true,
            screenData:true,
        }; 
    }

    componentDidMount() {
        var $this = this;
        InteractionManager.runAfterInteractions(() => {
            $this.getFriendsList();
        });
    }

    renderItem(rowData,sectionID,rowID){
        return(
            <View style={{height:60,alignItems:'center',flexDirection:'row',paddingLeft:20,paddingRight:20,backgroundColor:'#fff',borderBottomWidth:1,borderBottomColor:'#ccc'}}>
                <ImageWrapper style={{width:40,height:40,borderRadius:5}} icon={rowData.user_head_img?{uri:'http://test.520m.com.cn/upload/thumb/'+rowData.user_head_img}:'touxiang'}/>
                <View style={{flex:1,marginLeft:20}}>
                    <Text>{rowData.username}</Text>
                </View>
                <TouchableOpacity onPress={()=>this.joinClub(rowData.friend_id,rowID)}>
                    <ImageWrapper width={24} height={24} icon={'addManager'}/>
                </TouchableOpacity>
            </View>
        )
    }

    render(){
        var details = this.state.clubData;
        return (
            <View style={styles.container}>
                <NavigationBar 
                    leftIcon={'left'} 
                    titleText={'添加群成员'} 
                    leftPress={()=>this.goBack()}/>
                <ListView
                    dataSource={this.state.friendeArr}
                    renderRow={(rowData,sectionID,rowID)=>this.renderItem(rowData,sectionID,rowID)}
                    enableEmptySections={true}
                    onEndReachedThreshold={1}
                    onEndReached={()=>this.getFriendsList()}/>
                    
            </View>
        )

    }

    getFriendsList(){
        var $this = this;
        if(this.state.loadMore){
            userService.userFriendList(function(data){
                // alert(JSON.stringify(data.data));
                if(data.code==10000){
                    var arr = data.data.items;
                    var dataList = $this.state.groupList;
                    var len = dataList.length;
                    var num = arr.length;
                    
                    for(var i=0;i<len;i++){
                        for(var j=0;j<num;j++){
                            if(dataList[i].user_id==arr[j].friend_id){
                                arr.splice(j,1);
                                j--;
                                num--;
                            }
                        }
                        
                    }
                    $this.list = $this.list.concat(arr);
                    
                    if($this.page<data.data._meta.pageCount){
                        $this.page+=1;
                        $this.setState({
                            friendeArr:$this.state.friendeArr.cloneWithRows($this.list),
                            loadMore:true,
                        })
                    }else{
                        $this.setState({
                            friendeArr:$this.state.friendeArr.cloneWithRows($this.list),
                            loadMore:false,
                        })
                    }   
                }
            },0,$this.page,/*'AJSokVMfILggHQMIEekVVo6oPT23DAFK'*/$this.state.token);
        } 
    }

    joinClub(userId,index){
        var $this = this;
        userService.joinGroup(function(data){
            // alert(JSON.stringify(data));
            if(data.code==10000){
                alert('添加成功！');
                $this.list.splice(index,1);
                $this.list = JSON.parse(JSON.stringify($this.list))
                $this.setState({
                    friendeArr:$this.state.friendeArr.cloneWithRows($this.list),
                })
            }else{
                alert(data.data);
            }
        },userId,/*3*/$this.state.groupId,/*'我的俱乐部'*/$this.state.groupName,/*'AJSokVMfILggHQMIEekVVo6oPT23DAFK'*/$this.state.token)
    }

    goBack(){
        this.props.navigation.state.params.getData();
        this.props.navigation.goBack();
    }

}


const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#EFEFF4',
        ...Platform.select({
            ios: {
                marginTop: 20
            },
            android: {
                marginTop:0
            },

        }),
    },
    
    
});